<template>
  <div class="room-list">
    <div class="top-tips">
      <img class="logo" src="@/assets/img/login/pic-loding.png" alt="" />
    </div>
    <div class="body">
      <div class="user-box">
        <div class="tips">基本信息</div>
        <div class="line"></div>
        <div class="user-info">
          <div class="user-img">
            <img src="@/assets/img/login/pic-loding.png" alt="" />
          </div>
          <div class="user-other">
            <div class="name">您好</div>
            <div class="autograph">签名</div>
          </div>
        </div>
      </div>
      <div class="my-meeting">
        <div class="title">我的会议</div>
        <div class="meeting-list">
          <meeting-box
            @goRoom="goRoom"
            v-for="(item, index) in myMeetingList"
            :info="item"
            :key="index"
          >
          </meeting-box>
        </div>
      </div>
      <div class="history-meeting">
        <div class="title">历史会议</div>
        <div class="meeting-list">
          <meeting-box
            v-for="(item, index) in historyList"
            :info="item"
            :key="index"
            :type="'end'"
          >
          </meeting-box>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import meetingBox from "./meeting-box";
import RoomAPI from "@/api/room";
import UserAPI from "@/api/user";
import { mapGetters } from "vuex";
export default {
  data() {
    // 从登陆进入房间(会议)列表,应携带用户id和用户sig信息
    // 用户选择进入某个房间,目前房间只有音视频房间(trtc),会加入白板房间,im通信房间等.其用户信息通用.
    // 但需要鉴别不同类型的房间id,用户会同时进入音视频和白板房间,需要注意.

    // 会议房间状态 status 1:会议即将开始,2:进行中,3,会议中场休息,4,会议已结束
    return {
      info: {
        name: "李思源",
        desc: "浪漫DE罪",
      },
      myMeetingList: [
        {
          post: "",
          title: "小儿感冒课题会议1",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          trtcRoomId: 872924742,
          status: "2",
        },
        {
          post: "",
          title: "小儿感冒课题会议1",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          trtcRoomId: 872924742,
          status: "2",
        },
        {
          post: "",
          title: "小儿感冒课题会议1",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          trtcRoomId: 872924742,
          status: "2",
        },
        {
          post: "",
          title: "小儿感冒课题会议1",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          trtcRoomId: 872924742,
          timer: 500,
          status: "1",
        },
        {
          post: "",
          title: "小儿感冒课题会议2",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          trtcRoomId: 872924742,
          timer: 500,
          status: "1",
        },
      ],
      historyList: [
        {
          post: "",
          title: "小儿感冒课题会议2",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          status: "已结束",
          duration: "120",
          trtcRoomId: 872924742,
          status: "4",
        },
        {
          post: "",
          title: "小儿感冒课题会议2",
          date: "2021-02-11 14:30~15:00",
          num: 22,
          trtcRoomId: 777777,
          status: "872924742",
          duration: "120",
          status: "4",
        },
      ],
      endList: [
        // { post: "", title: "小儿感冒课题会议", date: "2021-02-11 14:30~15:00" },
      ],
      trtcRoomId: "",
      userId: "",
    };
  },
  computed: {
    // 获取当前会议状态
    ...mapGetters(["TRTCFn", "userInfo", "roomInfo"]),
  },
  components: {
    meetingBox,
  },
  mounted() {
    this.userId = this.$route.query.userId;
    this.getRoomList();

    this.myMeetingList = [];
    this.historyList = [];
  },
  methods: {
    // 获取房间列表
    async getRoomList() {
      let res = await RoomAPI.getRoomList();
      console.log("获取房间列表成功", res);
      if (res && res.status == 200 && res.data) {
        this.myMeetingList = res.data.myMeetingList;
        this.historyList = res.data.historyList;
      }
    },
    async goRoom(item) {
      this.trtcRoomId = item.trtcRoomId;
      console.log("进入房间,房间id为:" + item.trtcRoomId, this.userId);
      let res = await UserAPI.userJoinRoom({
        userId: this.userId,
        roomId: item.trtcRoomId,
      });
      if (res.status == 200 && res.data.userId) {
        console.log("进入房间成功", res);
        this.$message({
          type: "success",
          message: "加入房间成功",
        });
        this.$router.push({
          name: "trtc",
          query: {
            userId: this.userId,
            trtcRoomId: item.trtcRoomId,
          },
        });
      } else {
        this.$message({
          type: "error",
          message: "加入房间失败",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.room-list {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  padding-top: 48px;
  .top-tips {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 48px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #d9d9d9;
    display: flex;
    align-items: center;
    img {
      margin-left: 20px;
      height: 28px;
      width: 78px;
    }
  }
  .body {
    padding: 37px 181px 0px 181px;
    .user-box {
      width: 100%;
      height: 135px;
      background: #ffffff;
      box-shadow: 0px 0px 8px 0px rgba(220, 220, 220, 0.5);
      border-radius: 6px;
      padding: 0 27px;
      padding-top: 17px;
      box-sizing: border-box;
      .tips {
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        line-height: 20px;
        text-shadow: 0px 0px 8px rgba(220, 220, 220, 0.5);
        margin-bottom: 10px;
      }
      .line {
        // height: 1px;
        box-shadow: 0px 0px 8px 0px rgba(220, 220, 220, 0.5);
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
      }
      .user-info {
        margin-top: 20px;
        display: flex;
        .user-img {
          width: 46.42px;
          height: 46.42px;
          margin-right: 16px;
          img {
            border-radius: 50%;
            border: solid 1px red;
            width: 100%;
            height: 100%;
          }
        }
        .user-other {
          .name {
            font-size: 17px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.65);
            line-height: 24px;
            text-shadow: 0px 0px 8px rgba(220, 220, 220, 0.5);
          }
          .autograph {
            margin-top: 6px;
            font-size: 12px;
            font-weight: 400;
            color: #8c8c8c;
            line-height: 17px;
            text-shadow: 0px 0px 8px rgba(220, 220, 220, 0.5);
          }
        }
      }
    }
    .my-meeting {
      margin-top: 20px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        line-height: 23px;
      }
      .meeting-list {
        margin-top: 13px;
        display: grid;
        grid-column-gap: 14px;
        grid-template-columns: repeat(4, 1fr);
      }
    }
    .history-meeting {
      margin-top: 9px;
      .title {
        font-size: 16px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.65);
        line-height: 23px;
      }
      .meeting-list {
        margin-top: 13px;
        display: grid;
        grid-column-gap: 14px;
        grid-template-columns: repeat(4, 1fr);
      }
    }
  }
}
</style>
